<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .joke {
            width: 300px;
            border: 1px solid rgb(197, 168, 168);
        }
        h3 {
            width: 100%;
            font-size: 30px;
            line-height: 30px;
            height: 50px;
        }
        p {
           font-size: 20px;
           width: 100%;
        }
        span {
            border: 1px solid black;
        }
    </style>
</head>
<body>
   <div class="joke">
       <h3>开心一笑-<span>换一个</span></h3>
       <p>加载中...</p>
   </div>
   <script src="./jquery-1.12.4.js"></script>
   <script>
       $(function(){
          function joke(){
            $.ajax({
               type:'get',
               url:'https://autumnfish.cn/api/joke',
               success:function(databack){
                   console.log(databack)
                   $('p').html(databack)

               }
           })
          }
          joke()

          $('span').on('click',function(){
              $('p').html('加载中...')
              joke()
          })

       })
   </script>
</body>
</html>